import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

typedef CallBack = Function(String value);

///
/// 单行，含"*"标题+输入框/文本的item
///
class StarTextFieldView extends StatefulWidget {
  final TextEditingController? controller;
  final List<TextInputFormatter>? inputFormatters;
  final bool enable;
  final TextInputType keyboardType;
  final bool isHideStar;
  final bool isHideTextField;
  final Widget? rightWidget;
  final Widget? bottomWidget;
  final String? text;
  final String? holdText;
  final TextAlign? textAlign;
  final double? vertical;
  final CallBack? callBack;
  final Function? tapInputCallback;
  final TextStyle? style;
  final bool showClear; // 是否显示清除按钮

  const StarTextFieldView({
    Key? key,
    this.controller,
    this.enable = true,
    this.keyboardType = TextInputType.text,
    this.isHideStar = false,
    this.isHideTextField = false,
    this.rightWidget,
    this.bottomWidget,
    this.text,
    this.holdText,
    this.textAlign,
    this.inputFormatters,
    this.vertical,
    this.style,
    this.showClear = true,
    this.tapInputCallback,
    this.callBack,
  }) : super(key: key);

  @override
  _StarTextFieldViewState createState() => _StarTextFieldViewState();
}

class _StarTextFieldViewState extends State<StarTextFieldView> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding:
          EdgeInsets.symmetric(horizontal: 15, vertical: widget.vertical ?? 20),
      decoration: const BoxDecoration(
        color: Colors.white,
        border: Border(
          bottom: BorderSide(
            width: .5,
            color: Color(0xFFDDDDDD),
          ),
        ),
      ),
      child: Column(
        children: [
          Row(
            children: [
              Text(
                '*',
                style: TextStyle(
                  fontSize: 16,
                  color: widget.isHideStar
                      ? Colors.transparent
                      : const Color(0xFFFF6E6D),
                ),
              ),
              Text(
                widget.text!,
                style: const TextStyle(
                  fontSize: 16,
                  color: Color(0xFF1D2023),
                ),
              ),
              const SizedBox(
                width: 24,
              ),
              widget.isHideTextField
                  ? Container()
                  : Expanded(
                      child: GestureDetector(
                        onTap: () {
                          if (widget.tapInputCallback != null) {
                            widget.tapInputCallback!();
                          }
                        },
                        child: TextField(
                          textAlign: widget.textAlign ?? TextAlign.left,
                          controller: widget.controller,
                          enabled: widget.enable,
                          inputFormatters: widget.inputFormatters,
                          keyboardType: widget.keyboardType,
                          style: widget.style ??
                              const TextStyle(
                                  fontSize: 16, color: Colors.black),
                          decoration: InputDecoration(
                            isCollapsed: true, // 高度包裹
                            border: InputBorder.none,
                            hintText: widget.holdText,
                            hintStyle: const TextStyle(
                              fontSize: 16,
                              color: Color(0xFF999999),
                            ),
                          ),
                          onChanged: (value) {
                            if (widget.callBack != null) {
                              widget.callBack!(value);
                            }
                            setState(() {});
                          },
                        ),
                      ),
                    ),
              widget.showClear
                  ? Offstage(
                      offstage: widget.controller!.text != '' ? false : true,
                      child: GestureDetector(
                        onTap: () {
                          setState(() {
                            widget.controller!.text = '';
                          });
                          if (widget.callBack != null) {
                            widget.callBack!("");
                          }
                        },
                        child: Container(
                          height: 13,
                          width: 13,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(30),
                              color: const Color.fromRGBO(161, 165, 169, 1)),
                          child: const Icon(
                            Icons.close_rounded,
                            size: 10,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    )
                  : Container(),
              widget.rightWidget != null
                  ? Container(
                      child: widget.rightWidget,
                    )
                  : Container()
            ],
          ),
          widget.bottomWidget != null
              ? Row(
                  children: [
                    const Text(
                      '*',
                      style: TextStyle(fontSize: 16, color: Colors.transparent),
                    ),
                    Text(
                      widget.text!,
                      style: const TextStyle(
                          fontSize: 16, color: Colors.transparent),
                    ),
                    const SizedBox(
                      width: 24,
                    ),
                    Expanded(child: widget.bottomWidget!),
                  ],
                )
              : Container(),
        ],
      ),
    );
  }
}
